<!-- 模板 -->
<template>
  <div class="consult">
    <div class="box">
      <el-card shadow="hover">
      <div>
        <i class="el-icon-tickets"></i>
        <span> 资讯分类</span>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          style="margin-left: 20px;"
          @click="handleAddCate"
          >新增</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="cateList"
        
        style="margin-top: 10px;width:100%"
      >
        <el-table-column label="文章分类" align="center" width="180"  prop="title">
          <!-- <template slot-scope="scope">
            {{ getClassifyName(scope.row.classifyId) }}
          </template> -->
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ formatT(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdateCate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    </div>
      <div class="box">
        <el-card>
        <div style="margin:10px">
        <i class="el-icon-tickets"></i>
        <span style="margin-right:20px"> 资讯文章</span>
        <!-- <el-select class="select" v-model="queryParams.classifyId" placeholder="请选择文章分类" clearable @change="handleQuery">
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button
          icon="el-icon-search"
          type="cyan"
          size="small"
          style="margin-left: 20px;"
          @click="handleQuery"
          >搜索</el-button
        > -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="add"
          >新增</el-button>
      </div>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column prop="title" label="题目名字" align="center"> 
                <template slot-scope="scope">
                    <el-link   @click="chakan(scope.row)">{{scope.row.title}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="图片" align="center" width="220">
                <template slot-scope="scope">
                    <!-- <img :src="scope.row.coverPicture" alt="" width="80" height="80"> -->
                  <el-image  style="width: 80px;" :src="scope.row.coverPicture"  :preview-src-list="[scope.row.coverPicture]"> </el-image>
                </template>
            </el-table-column>
            <el-table-column label="文章分类" align="center" >
              <template slot-scope="scope">
                {{ getClassifyName(scope.row.classifyId) }}
              </template>
            </el-table-column>
            <el-table-column prop="synopsis" label="简述" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column  label="操作" align="center" width="220">
                <template slot-scope="scope">
                    <el-button @click="handleUpdate(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <el-button @click="handleDeleteNews(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-card>

        <pagination
        v-show="newsTotal > 0"
        :total="newsTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getInformationList"
      />
    </div>

    <!-- 添加/编辑 资讯百科分类 -->
    <el-dialog :title="cateTitle" :visible.sync="cateOpen" width="600px"  :close-on-click-modal='false'>
      <el-form
        ref="cateForm"
        :model="cateForm"
        :rules="cateRules"
        label-width="120px"
      >
        <el-form-item label="资讯类名：" prop="title">
          <el-input v-model="cateForm.title"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCateForm">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加弹窗 -->
    <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="40%">
  <el-form :label-position="labelPosition" label-width="100px" :model="form" :rules="rules" ref="form">
        <el-form-item label="名字" prop="title" >
            <el-input v-model="form.title" ></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="coverPicture">
          <el-upload
            :headers='headers'
            class="avatar-uploader"
            :action="upImage+'/table/upload'"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            >
            <img v-if="form.coverPicture" :src="form.coverPicture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
         <el-form-item label="分类:" prop="classifyId">
              <el-select
                v-model="form.classifyId"
                placeholder="请选择资讯分类"
              >
                <el-option
                  v-for="item in cateList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
        <el-form-item label="描述" prop="content">
            <quill-editor 
                v-model="form.content" 
                ref="myQuillEditor" 
                :options="editorOption"
                height="180"
                @change="onEditorFocus($event)" >
            </quill-editor>
        </el-form-item>
        <el-form-item label="简介："  prop="synopsis">
        <el-input placeholder="请输入内容描述"
                  type="textarea"
                  v-model="form.synopsis"></el-input>
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer" v-if="showBtn">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getList,getAdd,getUpdate,getDet,getclassifyList,getDsc,
 getclassifyAdd,getclassifyUpdate,getclassifyDet} from "@/api/information/index";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        tableData:[],
        cateList:[],
        title:'',
        cateTitle:'',
        form:{
          synopsis:"",
        },
        cateForm:{},
        labelPosition: 'right',
        dialogVisible:false,
        loading:false,
        rules:{
          title: [
            { required: true, message: '请输入文章名字', trigger: 'blur' },
          ],
          coverPicture: [
            { required: true, message: '请输入图片', trigger: 'blur' }
          ],
          classifyId: [
            { required: true, message: '请选择资讯分类', trigger: 'change' }
          ],
          content: [
            {required: true, message: '请输入文章内容', trigger: 'blur' }
          ],
        },
        cateRules:{
          title:[
            { required: true, message: '请输入资讯分类', trigger: 'blur' },
          ],
        },
        showBtn:true,
        cateOpen:false,
        editorOption:{
          modules:{
                toolbar:[
                  ['bold', 'italic', 'underline', 'strike'],
                  [{ 'size': ['small', false, 'large', 'huge'] }],
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                  [{ 'color': [] }, { 'background': [] }], 
                  [{ 'direction': 'rtl' }],
                  [{ 'indent': '-1'}, { 'indent': '+1' }],
                ]
            }
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          classifyId: undefined
        },
        newsTotal:0,
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  watch: {},
  methods: {
    onEditorFocus({ quill, html, text }){
      this.form.synopsis = text.substring(0,30)
    },
    // 搜索分类
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getInformationList();
    // },
    // 删除文章
    handleDeleteNews(row) {
      const id = row.id ;
      // console.log(id)
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return getDet(id);
        })
        .then(() => {
          this.getInformationList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    // 修改文章
    handleUpdate(row) {
      this.showBtn = true
      this.dialogVisible = true;
      getDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
        }
      })
      this.title = "编辑文章";
    },
    getClassifyName(id) {
      let cate = this.cateList.find(item => {
        return item.id == id;
      });
        // console.log(cate);
      if (cate != undefined) {
        return cate.title;
      }
    },
    // 提交
    onSubmit(){
    this.$refs["form"].validate(valid => {
      if(valid){
        if (this.form.id != undefined) {
                  getUpdate(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('编辑成功')
                          this.dialogVisible = false
                          this.getInformationList()
                      }
                  })
                } else{
                // console.log(this.form);
                  getAdd(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('添加成功')
                          this.dialogVisible = false
                          this.getInformationList()
                      }
                  })
                }
      }
        
      });
    },
      // 获取资讯所有
    getInformationList() {
      this.loading = true;
      getList(this.queryParams).then(res => {
        // console.log(res);
        this.tableData = res.rows;
        this.newsTotal = res.total;
        this.loading = false;
      });
    },
    // 删除
    handleDelete(row) {
      const id = row.id;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return getclassifyDet(id);
        })
        .then(() => {
          this.getCateList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    // 点击编辑分类
    handleUpdateCate(row) {
      // console.log(row,'row')
      // this.cateForm = row;
      this.cateForm = JSON.parse(JSON.stringify(row))
      this.cateOpen = true;
      this.cateTitle = "修改分类";
    },
    // 提交资讯分类
    submitCateForm() {
      this.$refs["cateForm"].validate(valid => {
        if (valid) {
          if (this.cateForm.id != undefined) {
            getclassifyUpdate(this.cateForm).then(res => {
              if (res.code == 200) {
                this.cateOpen = false;
                this.$message.success('修改成功')
                this.getCateList();
                this.getInformationList();
              }
            });
          } else {
            getclassifyAdd(this.cateForm).then(res => {
              if (res.code == 200) {
                this.cateOpen = false;
                 this.$message.success('新增成功')
                this.getCateList();
                this.getInformationList();
              }
            });
          }
        }
      });
    },
    cancel1() {
      this.cateOpen = false;
      this.getCateList();
    },
    // 查询资讯
    getCateList() {
      this.loading = true;
      getclassifyList(this.queryParams).then(res => {
        // console.log(res);
        this.cateList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
      handleAvatarSuccess(res){
        // console.log(res.data)
        this.form.coverPicture ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
          // this.form.coverPic = res.message
         this.$message.success("上传成功");
        }
    },
      // handleClose(){
      //     this.dialogVisible = false
      //     this.getCateList()
      // },
      chakan(row){
        // console.log(row);
        this.showBtn = false
        // this.form = row
        getDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
        }
      })
        this.title = '查看'
        this.dialogVisible = true
      },
      add(){
        this.showBtn = true
          this.form = {
              coverPicture:'',
              synopsis:"",
          }
          this.dialogVisible = true
      },
      // 分类新增按钮
      handleAddCate(){
        this.cateForm = {};
        this.cateOpen = true;
        this.cateTitle = "新增分类";
      },
  },
  created () {
    this.getCateList()
    this.getInformationList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
// .select {
//   margin-left: 20px;
// }
.box{
    margin: 10px;
    .btn{
        margin: 10px;
    }
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.quill-editor{
    height: 300px;
    margin-bottom: 44px;
}
</style>
